<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>3d变幻</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 300px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .box-x {
        height: 80px;
        border: 1px red dashed;
      }
      .box {
        height: 100%;
        width: 120px;
        background-color: blanchedalmond;
        display: inline-block;
        outline: 1px solid black;
      }
      .case-rotate1 {
        transform: rotateX(45deg);
      }
      .case-rotate2 {
        transform: rotateY(45deg);
      }
      .case-rotate3 {
        transform: rotateZ(45deg);
      }
      .case-rotate4 {
        transform: rotate3d(1, 1, 1, 45deg);
      }
      .case-perspective1 {
        perspective: 800px;
      }
      .case-perspective1 div {
        transform: translateZ(10px);
      }
      .case-perspective1-scale .box {
        transition: 2s all;
      }
      .case-perspective1-scale .box:hover {
        transform: scaleX(-1);
      }
      .box-x.case-perspective1-scale {
        border: none;
      }
      .case-perspective2 {
        perspective: 200px;
        overflow: hidden;
        border: 1px solid black;
      }
      .case-perspective2 img {
        transform: translateZ(200px);
        transition: all 3s;
      }
      .case-perspective2:hover img {
        transform: translateZ(-100px);
      }
      .case-perspective3 {
        perspective: 200px;
        width: fit-content;
      }
      .case-perspective4 {
        width: fit-content;
      }
      .case-perspective3 div {
        width: 50px;
        height: 80px;
        background-color: blueviolet;
        display: inline-block;
        transform: rotateX(45deg);
      }
      .case-perspective4 div {
        width: 50px;
        height: 80px;
        background-color: salmon;
        display: inline-block;
        transform: perspective(200px) rotateX(45deg);
      }
      .case-perspective-style:checked + * {
        transform-style: preserve-3d;
      }

      .case-backface1,
      .case-backface2 {
        transition: 1s all;
        backface-visibility: hidden;
        position: absolute;
      }
      .case-backface1:hover,
      .case-backface2 {
        transform: rotateY(180deg);
      }
      .case-backface1:hover + .case-backface2 {
        transform: rotateY(0deg);
      }

      :checked + .simple1-stage {
        top: 50%;
        right: 40%;
      }
      .simple1-stage {
        position: absolute;
        top: -999%;
        right: -999%;

        perspective: 800px;
      }
      .simple1-container {
        transform-style: preserve-3d;
        transform: rotateY(0deg);
      }
      .simple1-container img {
        width: 100px;
        position: absolute;
        left: 0;
        bottom: 0;
        transform: rotateY(calc(var(--index) * 40deg)) translateZ(195.8px);
        animation: simple1 3s linear infinite;
      }
      @keyframes simple1 {
        0% {
          transform: rotateY(calc(var(--index) * 40deg)) translateZ(195.8px);
        }
        100% {
          transform: rotateY(calc(var(--index) * 40deg + 120deg))
            translateZ(195.8px);
        }
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./13-渐变.html">上一篇</a>
      <a href="./15-动画-transition.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>rotate</dt>
        <h4>
          css坐标系
        </h4>
        <dd>
          xyz轴，以屏幕左上角为（0,0），右和下方为正方向。z轴垂直于屏幕平面，指向用户为正方向
        </dd>
        <h4>
          rotateX/rotateY/rotateZ/rotate3d
        </h4>
        <dd>
          <div class="box-x">
            <div class="box case-rotate1">X旋转</div>
          </div>
          <div class="box-x">
            <div class="box case-rotate2">Y旋转</div>
          </div>
          <div class="box-x">
            <div class="box case-rotate3">Z旋转</div>
          </div>
          <div class="box-x">
            <div class="box case-rotate4">沿(1,1,1)向量为轴旋转45°</div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>perspective透视</dt>
        <h4>基本使用</h4>
        <dd>
          1）视点位于屏幕正前方；可以让孩子获得透视效果；
          <br />
          2）perspective(x)相当于距离屏幕x距离，看到的效果
          <br />
          <i>下图加入透视的伸缩动画，更有立体感</i>
        </dd>
        <dd>
          <div class="box-x case-perspective1-scale">
            <div class="box"></div>
          </div>
          <br />
          <div class="box-x case-perspective1-scale case-perspective1">
            <div class="box"></div>
          </div>
        </dd>
        <h4>translateZ寻找透视位置</h4>
        <dd>
          translateZ(x)，perspective(y)，其中x必须小于y，否则无图像（透视视点到图像前面去了，人是看不见背面的）
          <br />
          <br />
          请hover
        </dd>
        <dd class="case-perspective2">
          <img src="../../Source/pic.jpg" width="250px" />
        </dd>
        <h4>不同的透视点写法</h4>
        <dd>
          perspective: 200px;
          单独写在祖先节点上，共用一个视点，以整个舞台进行透视
          <section class="case-perspective3">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </section>
          transform: perspective(200px) rotateY(45deg);
          写在一起，写在需要透视的节点上，视点私有
          <section class="case-perspective4">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </section>
          可以看到，两种写法在正中间，透视效果是一样的
        </dd>
        <h4>透视点perspective-origin</h4>
        <dd>
          1）默认 50% 50%，表示舞台正中心
          <br />
          下图修改了视点位置
          <section
            class="case-perspective3"
            style="perspective-origin: 0% 75%;"
          >
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </section>
        </dd>
        <h4>transform-style</h4>
        <dd>
          该属性必须设置在舞台元素上才有效
          <br />
          1）flat，默认值，直接压出的图像放在图层上，相当于二向箔
          <br />
          2）preserve-3d，表示元素位于三维空间，更贴近真实世界的表现
          <br />
          <input class="case-perspective-style" type="checkbox" />
          设置为preserve-3d
          <section
            class="case-perspective3"
            style="background-color: rgba(93, 198, 206, 0.5);"
          >
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>backface-visibility</dt>
        <dd>
          css中，翻转会显示该元素的镜像。这与现实相悖。该属性可以隐藏背面。
          <div class="box-x" style="position: relative;">
            <div class="box case-backface1">正面</div>
            <div class="box case-backface2">模拟背面</div>
          </div>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>3d变幻例子</dt>
        <h4>旋转木马</h4>
        <dd>
          <input type="checkbox"> 显示该例
          <div class="simple1-stage">
            <div class="simple1-container">
              <img src="../../Source/pic.jpg" style="--index: 0;" />
              <img src="../../Source/pic.jpg" style="--index: 1;" />
              <img src="../../Source/pic.jpg" style="--index: 2;" />
              <img src="../../Source/pic.jpg" style="--index: 3;" />
              <img src="../../Source/pic.jpg" style="--index: 4;" />
              <img src="../../Source/pic.jpg" style="--index: 5;" />
              <img src="../../Source/pic.jpg" style="--index: 6;" />
              <img src="../../Source/pic.jpg" style="--index: 7;" />
              <img src="../../Source/pic.jpg" style="--index: 8;" />
            </div>
          </div>
        </dd>
      </dl>
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
